<template>
  <div class="dataPush">
    <el-dialog class="dialog" :visible="pushVisible" @close="handleClose">
      <span slot="title">
        <el-tabs v-model="activeName">
          <el-tab-pane label="推送数据礼包" name="first">
            <div>推送对象：{{ pushUser }}</div>
            <div class="uploadFile">上传文件</div>
            <div class="uploadBox">
              <el-upload
                class="upload-demo"
                action="http://zhmsbgapi.wenkangkeji.com/common/interface/upload_imges"
                multiple
                :file-list="fileList"
                :http-request="handleRequest"
              >
                <div class="upload">
                  <div class="bgUpload pa-flex-center">
                    <div class="icon">
                      <i class="el-icon-upload"></i>
                    </div>
                  </div>
                  <div>
                    <div class="desc2">点击上传文件</div>
                  </div>
                </div>
              </el-upload>
            </div>
            <div class="dialog-footer">
              <el-button class="cancel" @click="handleClose">取 消</el-button>
              <el-button class="sure" @click="addProjectFile">确 定</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="推送记录" name="second">
            <el-table :data="tableData" style="width: 100%" height="400">
              <el-table-column type="index" :index="indexMethod" label="序号" width="80"></el-table-column>
              <el-table-column prop="createTime" label="推送时间" width="180"></el-table-column>
              <el-table-column prop="fileName" label="推送文件" width="180">
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.fileUrl"
                    class="handle pa-mr-2"
                    @click="preview(scope.row.fileUrl)"
                  >
                    <img
                      v-if="getIconTitle(scope.row.fileUrl)==='.png'||getIconTitle(scope.row.fileUrl)==='.jpg'"
                      src="@/assets/images/_img.png"
                      alt
                      srcset
                    />
                    <img
                      v-else-if="getIconTitle(scope.row.fileUrl)==='.xlsx'"
                      src="@/assets/images/_excel.png"
                      alt
                      srcset
                    />
                    <img
                      v-else-if="getIconTitle(scope.row.fileUrl)==='.docx'"
                      src="@/assets/images/_word.png"
                      alt
                      srcset
                    />
                    <i v-else style="fontSize:40px" class="el-icon-folder"></i>
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { addProjectFileApi, getProjectFileLoginApi } from '@/api/manageApi.js'
import { uploadImages } from '@/api/commonApi'
export default {
  props: {
    pushVisible: {
      type: Boolean,
      default: false
    },
    proId: {
      type: String,
      default: ''
    }
  },
  watch: {
    pushVisible (val) {
      if (val) {
        this.getProjectFileLogin()
      } else {
        this.fileList = []
      }
    }
  },
  data () {
    return {
      activeName: 'first',
      tableData: [],
      fileList: [],
      imgUrl: [],
      fileName: [],
      pushUser: JSON.parse(localStorage.getItem('P-User-Info')).username
    }
  },
  methods: {
    handleClose () {
      this.$emit('update:pushVisible', false)
    },
    preview (url) {
      window.open(url, '_blank')
    },
    indexMethod (index) {
      return index < 10 ? '0' + (index + 1) : index + 1
    },
    getIconTitle (fileUrL) {
      if (!fileUrL) {
        return ''
      }
      const endIndex = fileUrL.lastIndexOf(".");
      const str = fileUrL.substr(endIndex);
      return str
    },
    handleRequest (file) {
      const formData = new FormData()
      formData.append('file', file.file)
      uploadImages(formData).then(res => {
        if (res.code == 0) {
          this.fileName = [...this.fileName, ...res.fileName]
          this.imgUrl = [...this.imgUrl, ...res.imgUrl]
          this.$message.success('上传成功')
        } else {
          this.$message.error('上传失败')
        }
      })
    },
    // 上传文件
    addProjectFile () {
      addProjectFileApi({
        type: '2',
        projectId: this.proId,
        fileNames: this.fileName,
        fileUrls: this.imgUrl,
        createBy: JSON.parse(localStorage.getItem('P-User-Info')).username
      }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.fileList = []
          this.fileName = []
          this.imgUrl = []
          this.getProjectFileLogin()
        }
      })
    },
    // 推送记录
    getProjectFileLogin () {
      getProjectFileLoginApi({
        projectId: this.proId
      }).then(res => {
        if (res.code == 0) {
          this.tableData = res.data
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.dataPush {
  .handle {
    cursor: pointer;
  }
  ::v-deep .el-dialog {
    width: 620px !important;
    height: 500px;
    position: relative;
  }
  ::v-deep .el-tabs__content {
    height: 420px;
    overflow: scroll;
    padding-bottom: 20px;
  }
  ::v-deep .el-upload-list {
    // height: 100px;
    width: 500px;
    // overflow: scroll;
  }
  ::v-deep .el-dialog__body {
    padding: 0;
  }
  .uploadFile {
    margin: 24px 0 16px 0;
  }
  .dialog-footer {
    // position: absolute;
    // bottom: 20px;
    // right: 45px;
    display: flex;
    justify-content: flex-end;
    margin-right: 30px;
    margin-top: 20px;
    .cancel {
      width: 80px;
      height: 31px;
      border: 1px solid #2b80ff;
      border-radius: 5px;
      color: #2b80ff;
      padding: 0;
    }
    .sure {
      width: 80px;
      height: 31px;
      background: #2b80ff;
      border-radius: 5px;
      color: #fff;
      padding: 0;
    }
  }
  ::v-deep .el-tabs__item {
    font-size: 18px !important;
  }
  ::v-deep .el-tabs__item.is-active {
    font-size: 18px !important;
    color: #408cff !important;
    background-color: transparent !important;
  }
  .uploadBox {
    .upload {
      width: 534px;
      height: 250px;
      border: 1px dotted #b1b1b1;
      border-radius: 11px;
      padding: 10px;
      .bgUpload {
        width: 104px;
        height: 104px;
        background: #f7f7f7;
        border-radius: 50%;
        margin: 40px auto 20px auto;
      }
      .icon {
        width: 43px;
        height: 43px;
        background: #2251f8;
        border-radius: 11px 11px 11px 11px;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .desc2 {
        color: #2251f8;
      }
    }
  }
}
</style>
